<!--
 * @Author: lpz1096
 * @Date: 2021-12-07 16:47:47
 * @LastEditors: lpz1096
 * @LastEditTime: 2021-12-13 15:41:12
 * @Description:
 * @FilePath: \ptadmin\src\views\order\account\components\payment-table.vue
-->
<template>
  <a-table
    :columns="columns"
    :data-source="dataList"
    :pagination="pagination"
    :loading="loading"
    :row-key="(record, index) => index"
    @change="handleTableChange"
    bordered
  >
    <template v-slot:merchant_name="{ merchant_name }">
      <a-tooltip :title="merchant_name" placement="topLeft">
        {{
          merchant_name
        }}
      </a-tooltip>
    </template>
    <span slot="pay_status" slot-scope="text, record">
      <span>{{ payStatus[record.pay_status] }}</span>
    </span>
    <template slot="action" slot-scope="text, record">
      <a @click="viewOrder(record)" v-has="'orderAccount.paymentDetail'">
        <a-icon type="eye" style="margin-right: 5px" />查看详情
      </a>
    </template>
  </a-table>
</template>

<script>
import orderAccount from "@/api/orderAccount"
import day from "@/utils/day"
const payStatus = {
  "-1": "支付失败",
  0: "未支付",
  1: "支付成功",
  2: "支付中",
}
export default {
  props: {
    marketData: Array,
    queryForm: Object,
  },
  components: {},
  data () {
    return {
      dataList: [],
      loading: false,
      payStatus,
      columns: [
        {
          title: "结算单号",
          dataIndex: "order_no",
          align: "center",
          key: "order_no",
        },
        {
          title: "时间",
          dataIndex: "created_at",
          align: "center",
          key: "created_at",

          customRender: (text) => {
            return day.FormatDate(text)
          },
        },
        {
          title: "微信单号",
          dataIndex: "chnltrxid",
          align: "center",
          key: "chnltrxid",
        },
        {
          title: "通联单号",
          dataIndex: "trxid",
          align: "center",
          key: "trxid",
        },
        {
          title: "商铺名",
          align: "center",
          ellipsis: true,
          sorter: false,
          scopedSlots: {
            customRender: "merchant_name",
          },
        },
        {
          title: "所属市场",
          dataIndex: "market_id",
          align: "center",
          key: "market_id",
          customRender: (text) => {
            const item = this.marketData.filter((item) => item.id === text)
            return item.length ? item[0].name : text
          },
        },
        {
          title: "件数",
          dataIndex: "qty",
          align: "center",
          key: "qty",
        },
        {
          title: "支付类型",
          dataIndex: "pay_status",
          align: "center",
          key: "pay_status",
          scopedSlots: { customRender: "pay_status" },
        },
        {
          title: "支付方式",
          dataIndex: "pay_type",
          align: "center",
          key: "pay_type",
          customRender: (text) => {
            return text ? '微信支付' : '余额支付'
          },
        },
        {
          title: "实付金额",
          dataIndex: "pay_amount",
          align: "center",
          key: "pay_amount",
          customRender: (text) => {
            return "￥" + text / 100
          },
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          key: "action",

          scopedSlots: { customRender: "action" },
        },
      ],
      pagination: {
        current: 1,
        pageSize: 20,
        total: 0,
        totalPage: 0,
        showSizeChanger: true,
        showTotal: (total) => `总 ${total} 条`,
      },
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    // 搜索
    search () {
      this.dataList = []
      this.pagination.current = 1
      this.handleTableChange(this.pagination, {}, {})
    },
    handleTableChange (pagination, filters, sorter) {
      this.fetch({
        ...filters,
        ...this.queryForm,

        pageSize: pagination.pageSize,
        page: pagination.current,
      })
    },
    async fetch (params = {}) {
      this.loading = true
      await orderAccount.paymentQuery(params).then((response) => {
        if (response.code !== 1) {
          this.$message.warning(response.message)
          return
        }

        if (response.page) {
          this.pagination.current = response.page["page"]
          this.pagination.pageSize = response.page["pageSize"]
          this.pagination.total = response.page["totalSize"]
          this.pagination.totalPage = response.page["totalPage"]
        }

        if (response.data && response.data.length > 0) {
          this.dataList = response.data
        }
      })
      this.loading = false
    },
    viewOrder (record) {
      this.$router.push("/order-account/detail/" + record.id)
    },
  },
}
</script>

<style scoped>
.tooltipLink {
  color: #fff;
}
.tooltipLink:hover {
  color: #1890ff;
}
</style>
